<template>
	<view class="community_group_main">
		<view class="recover_text_iine">
			<view class="recover_text">
				发现社群
			</view>
			<view class="goto_icon" @click="discoverGroup">
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<view class="community_group_list">
			<view class="community_group_per" v-for="(item,index) in newCommunityList" :key="index"
				:style="{backgroundColor: item.communityBgColor}" @click="clickGroupCard(item)">
				<view class="top_name_avatar_image_address">
					<view class="left_name_address_type_avatar_member">
						<view class="address_type">
							<view class="community_group_address gray_text_style_common">
								{{item.address}}
							</view>
							<view class="community_group_address gray_text_style_common type_view">
								{{item.type}}
							</view>
						</view>
						<view class="community_group_name">
							{{item.communityGroupName}}
						</view>
						<view class="member_avatar_num">
							<view class="member_avatars">
								<view v-for="(url,index) in item.memberAvatar" :key="index">
									<image :src="url" mode="aspectFill" class="member_avatar_image"></image>
								</view>
							</view>
							<view class="member_num">
								{{item.memberNum}}个成员在交流中
							</view>
						</view>
					</view>
					<view class="right_community_group_image">
						<image :src="item.communityGroupImage" mode="aspectFill" class="community_group_iamge"></image>
					</view>
				</view>
				<view class="bottom_acvity_time_title">
					<view class="left_active_text">
						<view class="text_huodong">
							活动
						</view>
						<view class="text_huodong">
							上新
						</view>
					</view>
					<view class="divider_view"></view>
					<view class="right_active_name_time_start">
						<view class="active_title_content">
							{{item.latestActive.activeName}} | {{item.latestActive.activeBriefContent}}
						</view>
						<view class="active_time_view">
							{{item.latestActive.activeTime}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="explore_happy_recovery">
			<view class="explore_happy">
				探索属于你的乐趣,
			</view>
			<view class="recovery_link" @click="discoverGroup">
				发现更多社群
			</view>
		</view>
		<view class="already_bottom">
			<view class="bottom_line"></view>
			<view class="already_bottom_text">
				已经到底啦
			</view>
			<view class="bottom_line"></view>
		</view>
	</view>
</template>

<script>
	import mitter from '@/common/mitt/eventBus.js'
	export default {
		data() {
			return {
				communityGroupList: [{
						address: '上海市',
						type: '美食',
						communityGroupName: '美食研究所',
						memberAvatar: [
							'https://img0.baidu.com/it/u=4227516592,1575927796&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
							'https://img1.baidu.com/it/u=650036786,1039648685&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
							'https://img1.baidu.com/it/u=1597101690,1536645457&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						],
						memberNum: 1350,
						communityGroupImage: 'https://t12.baidu.com/it/u=3207593634,171445972&fm=30&app=106&f=JPEG?w=640&h=426&s=FD7C04C65764BCFC544DCC2C03007053',
						latestActive: {
							activeName: '春日养生',
							activeBriefContent: '分享你的独家养生心得',
							activeTime: '3月30日 14:58开始'
						}
					},
					{
						address: '全国',
						type: '美酒',
						communityGroupName: '微醺俱乐部',
						memberAvatar: [
							'https://img1.baidu.com/it/u=1868644018,3574462516&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
							'https://img2.baidu.com/it/u=2680008510,3238224245&fm=253&fmt=auto?w=500&h=528',
							'https://img2.baidu.com/it/u=1566421977,3930982289&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
						],
						memberNum: 3902,
						communityGroupImage: 'https://img1.baidu.com/it/u=481210233,4063291816&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
						latestActive: {
							activeName: '【专栏讲酒SSE1】',
							activeBriefContent: '微醺订阅月酒',
							activeTime: '3月09日 19:00开始'
						}
					},
					{
						address: '全国',
						type: '商家合伙人',
						communityGroupName: '用户福利合伙人，探店营',
						memberAvatar: [
							'https://img1.baidu.com/it/u=1494163501,3385442683&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
							'https://img1.baidu.com/it/u=1904161699,104187177&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
							'https://img2.baidu.com/it/u=2424829942,2183534881&fm=253&fmt=auto&app=120&f=JPEG?w=665&h=375',
						],
						memberNum: 29,
						communityGroupImage: 'https://img0.baidu.com/it/u=2694225508,4088109572&fm=253&fmt=auto?w=1165&h=800',
						latestActive: {
							activeName: '【福利合伙人探店营】',
							activeBriefContent: '线上话题...',
							activeTime: '10月30日 12:00开始'
						}
					},
				],
				newCommunityList: [],
			}
		},
		created() {
			// 随机渲染社群的背景
			this.changeCommunityGroupBg();
		},
		mounted() {
			// 添加searchChatOrCommunitiesValue事件监听，只在这里添加一次，避免重复添加
			mitter.on('searchChatOrCommunitiesValue', (data) => {
				// 根据data的值搜索会话列表
				this.searchFunc(data.trim());
			})
		},
		beforeDestroy() {
			mitter.off('searchChatOrCommunitiesValue');
		},
		onHide() {
			mitter.off('searchChatOrCommunitiesValue');
		},
		methods: {

			// 根据data的值搜索会话列表
			searchFunc(data) {
				this.newCommunityList = []
				this.communityGroupList.forEach(item => {
					if (item.address.includes(data) || item.type.includes(data) || item.communityGroupName
						.includes(data) || item.latestActive.activeBriefContent.includes(data) || item.latestActive
						.activeName.includes(data) || item.latestActive.activeTime.includes(data)) {
						this.newCommunityList.push(item)
					}
				})
			},

			// 随机渲染社群的背景
			changeCommunityGroupBg() {
				const bgColor = ["#e0d3e9", "#f1e6e0", "#d7e9e2", "#e9e0d8", "#e3d7e9", "#e9e3d7", "#d3e9e0", "#e0e9d3",
					"#e6e0f1", "#d7e3e9", "#e9d7e0", "#e0e3d7", "#d7e0e9", "#e3e9d7", "#e9d3e0", "#f1d7e0", "#e0e9e3",
					"#d7e0e3", "#e3d7e0", "#e0d7e9", "#e9e0e3", "#d3e0e9", "#e9e3e0", "#e0d8e9", "#e9e0e6", "#d8e9e0",
					"#e0e6e9", "#e3e0d7", "#d7e9e3", "#e9e6e0", "#d8e0e9", "#e9e0d3", "#e6e9e0", "#d3e9e3", "#e3e0e6",
					"#e6e3e9", "#e9d8e0", "#e0e9e6", "#d8e0e6", "#e6e0e9", "#e3e6e0", "#e0e3e6", "#e6e9d7", "#d7e6e9",
					"#e9e3e6", "#e6e0d8", "#d8e9e3", "#e3e9e6", "#e6d7e0", "#e0e6e3", "#e3e6d7", "#d7e3e0", "#e0d7e6",
					"#e6e3e0", "#e3d8e9", "#e9e6e3", "#d8e3e9", "#e6e9e3", "#e3e9d8", "#e9e6d7", "#d7e9e6", "#e6d8e0",
					"#e0e3e9", "#e9e3e6", "#e3e6e9", "#e9d7e3", "#e3e9e0"
				];
				this.newCommunityList = this.communityGroupList.map((item) => {
					// 随机取一个
					let index = Math.floor(Math.random() * bgColor.length);
					// 再添加到社群列表
					return {
						...item,
						communityBgColor: bgColor[index]
					}
				});
			},
			
			discoverGroup(){
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},
			
			clickGroupCard(item){
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},
		}
	}
</script>

<style scoped>
	/* 灰色字体，大小，样式 */
	.gray_text_style_common {
		font-size: 22rpx;
		letter-spacing: 2px;
		color: rgb(89, 87, 103);
	}

	.community_group_main {
		padding: 50rpx;
		padding-top: 220rpx;
		background-color: #fff;
	}

	.recover_text_iine {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 16px;
	}

	.community_group_list {
		margin-top: 20px;
	}

	.community_group_per {
		padding-top: 15px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 15px;
		border-radius: 5px;
		margin-bottom: 50rpx;
		box-shadow: 0 0 10px 5px rgba(36, 49, 48, 0.3);
	}

	.community_group_address {
		padding-left: 10rpx;
		padding-right: 10rpx;
		padding-top: 8rpx;
		padding-bottom: 8rpx;
		background-color: rgb(243, 233, 231);
		border-radius: 10rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.address_type {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.top_name_avatar_image_address {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.left_name_address_type_avatar_member {
		width: 60%;
		word-wrap: break-word
	}

	.member_avatars {
		display: flex;
		flex-direction: row;
	}

	.member_avatar_image {
		width: 15px;
		height: 15px;
		border-radius: 50%;
	}

	.right_community_group_image {
		width: 40%;
		display: flex;
		justify-content: flex-end;
	}

	.community_group_iamge {
		width: 80px;
		height: 80px;
	}

	.community_group_name {
		width: 380rpx;
		padding-top: 3px;
		padding-right: 3px;
		font-size: 40rpx;
	}

	.type_view {
		margin-left: 10px;
	}

	.member_avatar_num {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.member_num {
		margin-left: 6px;
		font-size: 10px;
		font-family: hongLeiXingShu;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 30px;
		color: #878787;
	}

	.bottom_acvity_time_title {
		margin-top: 15px;
	}

	.bottom_acvity_time_title {
		display: flex;
		flex-direction: row;
	}

	.divider_view {
		width: 2px;
		margin-left: 10px;
		margin-right: 10px;
		background: linear-gradient(to bottom, #a7cdcf, #df9cc2);
	}

	.text_huodong {
		font-size: 17px;
		font-family: hongLeiXingShu;
		letter-spacing: 2px;
		color: #ba98b4;
	}

	.right_active_name_time_start {
		letter-spacing: 2px;
		font-size: 8px;
		font-family: cursive;
		color: #626262;
	}

	.active_time_view {
		margin-top: 15px;
	}

	.explore_happy_recovery {
		margin-top: 50px;
		margin-bottom: 50px;
		font-size: 12px;
		text-align: center;
		letter-spacing: 2px;
		font-family: cursive;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.recovery_link {
		color: #5cb0b0;
	}

	.already_bottom {
		margin-top: 60px;
		text-align: center;
		color: #b9b9b9;
		font-family: cursive;
		font-family: cursive;
		font-size: 13px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.bottom_line {
		width: 15px;
		height: 1px;
		border: 1px solid;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 7px;
	}
</style>